<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Modal 对话框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
</head>
<style>
.ant-btn{
	margin-left: 20px;
}
.aut-icon{
	height: 2em;
	width: 2em;
	color: red;
}
.ant-modal-confirm-body>.ant-modal-confirm-title{
	flex: auto !important;
	margin-left: 8px;
}

.full999 {
	.ant-modal{
		max-width: 100%;
		top: 0;
		padding-bottom: 0;
		margin: 0;
	}
	.ant-modal-content{
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}
	.ant-modal-body{
		flex: 1;
	}
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法（推荐）</a-divider><!-- =============================================================== -->
	<p class="desc">第一个对话框。</p>
	<a-button type="primary" @click="showModal1">打开对话框</a-button>
	<a-button type="primary" @click="showInfo1">Modal.info()方式</a-button>
	<a-modal v-model:open="open1" title="基础对话框" ok-text="确认" cancel-text="取消" @ok="handleOk1" @cancel="handleCancel1">
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">自定义页脚</a-divider><!-- =============================================================== -->
	<p class="desc">更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。 不需要默认确定取消按钮时，你可以把 footer 设为 null。</p>
	<a-button type="primary" @click="showModal2">带有自定义页脚的Open Modal</a-button>
	<a-modal v-model:open="open2" title="Title" @ok="handleOk2">
		<template #footer>
			<a-button key="back" @click="handleCancel2">Cancel</a-button>
			<a-button key="submit" type="primary" :loading="loading2" @click="handleOk2">Submit</a-button>
		</template>
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">信息提示</a-divider><!-- =============================================================== -->
	<p class="desc">各种类型的信息提示，只提供一个按钮用于关闭。</p>
	<a-button @click="info1">Info</a-button>
	<a-button @click="success1">Success</a-button>
	<a-button @click="error1">Error</a-button>
	<a-button @click="warning1">Warning</a-button>
	
	
	<a-divider class="a-divi" orientation="left">国际化</a-divider><!-- =============================================================== -->
	<p class="desc">设置 okText 与 cancelText 以自定义按钮文字。</p>
	<a-button type="primary" @click="showModal4">Modal</a-button>
	<a-button @click="confirm4">Confirm</a-button>
	<a-modal v-model:open="open4" title="Modal" ok-text="确认" cancel-text="取消" @ok="handleOk4">
		<p>Bla bla ...</p>
		<p>Bla bla ...</p>
		<p>Bla bla ...</p>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">自定义位置</a-divider><!-- =============================================================== -->
	<p class="desc">使用 centered 或类似 style.top 的样式来设置对话框位置。</p>
	<a-button type="primary" @click="showModal5(true)">Top：20px</a-button>
	<a-modal v-model:open="open5" title="20px to Top" style="top: 20px" @ok="showModal5(false)">
		<p>some contents...</p>
		<p>some contents...</p>
		<p>some contents...</p>
	</a-modal>
	<br />
	<br />
	<a-button type="primary" @click="open6 = true">垂直居中模态对话框</a-button>
	<a-modal v-model:open="open6" title="Vertically centered modal dialog" centered @ok="open6 = false">
		<p>some contents...</p>
		<p>some contents...</p>
		<p>some contents...</p>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">确认对话框(promise)</a-divider><!-- =============================================================== -->
	<p class="desc">使用 confirm() 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭</p>
	<a-button @click="showModal6">Confirm</a-button>
	
	<a-divider class="a-divi" orientation="left">自定义页脚按钮属性</a-divider><!-- =============================================================== -->
	<p class="desc">传入 okButtonProps 和 cancelButtonProps 可分别自定义确定按钮和取消按钮的 props。</p>
	<a-button type="primary" @click="showModal7">有定制的页脚按钮</a-button>
	<a-modal v-model:open="open7" title="Basic Modal" :ok-button-props="{ disabled: true }" :cancel-button-props="{ disabled: true }" @ok="handleOk7">
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">自定义渲染对话框</a-divider><!-- =============================================================== -->
	<p class="desc">自定义渲染对话框, 可通过 vueuse 来实现拖拽。</p>
	<a-button type="primary" @click="showModal8">可拖动（没有实现）</a-button>
	<a-modal ref="modalRef" v-model:open="open8" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk8">
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
		<template #title>
			<div ref="modalTitleRef" style="width: 100%; cursor: move">可拖动对话框</div>
		</template>
		<template #modalRender="{ originVNode }">
			<div :style="transformStyle">
				<component :is="originVNode" />
			</div>
		</template>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">异步关闭</a-divider><!-- =============================================================== -->
	<p class="desc">点击确定后异步关闭对话框，例如提交表单。</p>
	<a-button type="primary" @click="showModal9">Open Modal with async logic</a-button>
	<a-modal v-model:open="open9" title="Title" :confirm-loading="confirmLoading9" @ok="handleOk9">
		<p>{{ modalText9 }}</p>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">确认对话框</a-divider><!-- =============================================================== -->
	<p class="desc">使用 confirm() 可以快捷地弹出确认框。</p>
	<a-button @click="showConfirm1">Confirm</a-button>
	<a-button @click="showConfirm2">With promise</a-button>
	<a-button @click="showConfirm3" type="dashed">Delete</a-button>
	<a-button @click="showConfirm4" type="dashed">With extra props</a-button>
	
	<a-divider class="a-divi" orientation="left">使用useModal获取上下文（不推荐）</a-divider><!-- =============================================================== -->
	<p class="desc">通过 Modal.useModal 创建支持读取 context 的 contextHolder。</p>
	<a-button @click="showConfirm5">Confirm</a-button>
	<a-button @click="showConfirm6">With promise</a-button>
	<a-button @click="showConfirm7" type="dashed">Delete</a-button>
	<a-button @click="showConfirm8" type="dashed">With extra props</a-button>
	
	<a-divider class="a-divi" orientation="left">手动更新和移除</a-divider><!-- =============================================================== -->
	<p class="desc">手动更新和关闭 Modal.method 方式创建的对话框。</p>
	<a-button @click="showModal12">Open modal to close in 5s</a-button>
	
	<a-divider class="a-divi" orientation="left">销毁确认对话框</a-divider><!-- =============================================================== -->
	<p class="desc">使用 Modal.destroyAll() 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。</p>
	<a-button @click="showModal13">Confirm</a-button>
	
	<a-divider class="a-divi" orientation="left">自定义模态的宽度</a-divider><!-- =============================================================== -->
	<p class="desc">使用width来设置模态对话框的宽度</p>
	<a-button type="primary" @click="showModal14">Open Modal of 1000px width</a-button>
	<a-modal v-model:open="open14" width="1000px" title="Basic Modal" @ok="handleOk14">
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-modal>
	
	<a-divider class="a-divi" orientation="left">全屏</a-divider><!-- =============================================================== -->
	<p class="desc">使用样式定义一个全屏弹窗</p>
	<a-button type="primary" @click="showModal15">Open Modal</a-button>
	<a-modal v-model:open="open15" title="Basic Modal" width="100%" wrap-class-name="full999" @ok="handleOk15">
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-modal>
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Modal = antd.Modal;
const Main = {
data() {
	return {
		open1: false,
		open2: false,
		loading2: false,
		
		open4: false,
		open5: false,
		open6: false,
		open7: false,
		open8: false,
		open9: false,
		confirmLoading9: false,
		modalText9: 'Content of the modal',
		open14: false,
		open15: false,
	}
},
methods:{
	showModal1(){
		this.open1 = true;
	},
	handleOk1(e){
		console.log(e);
		console.log("点击确定回调");
		this.open1 = false;
	},
	handleCancel1(e){
		console.log(e);
		console.log("点击遮罩层或右上角叉或取消按钮的回调");
	},
	showInfo1(){
		Modal.info({
			title: '这是消息标题',
			content: "这是消息内容",
			// maskClosable: true,
		});
	},
	
	showModal2(){
		this.open2 = true;
	},
	handleOk2(e){
		console.log(e);
		this.loading2 = true;
		setTimeout(() => {
			this.loading2 = false;
			this.open2 = false;
		}, 1000);
	},
	handleCancel2(){
		this.open2 = false;
	},
	
	info1(){
		Modal.info({
			title: '这是一条通知消息',
			content: Vue.h('div', {}, [
				Vue.h('p', 'some messages...some messages...'),
				Vue.h('p', 'some messages...some messages...'),
			]),
			onOk() {
				console.log('ok');
			},
			maskClosable: true,
		});
	},
	success1(){
		Modal.success({
			title: '这是一条成功消息',
			content: Vue.h('div', {}, [
				Vue.h('p', 'some success...some success...'),
				Vue.h('p', 'some success...some success...'),
			]),
			maskClosable: true,
		});
	},
	error1(){
		Modal.error({
			title: '这是一条错误消息',
			content: "some error...some error..."
		});
	},
	warning1(){
		Modal.confirm({
			title: '这是一条警告消息',
			content: "some warning...some warning...",
			okText: '确认',
			cancelText: '取消6',		//这里就不生效了，只有confirm框才能出现取消按钮
			maskClosable: true,
		});
	},
	
	showModal4(){
		this.open4 = true;
	},
	handleOk4(e){
		console.log(e);
		this.open4 = false;
	},
	confirm4(){
		Modal.confirm({
			title: 'Confirm',
			// icon: createVNode(ExclamationCircleOutlined),
			// icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
			icon: Vue.createVNode(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
			content: 'Bla bla ...',
			okText: '确认',
			cancelText: '取消',
			maskClosable: true,
		});
	},
	
	showModal5(val){
		this.open5 = val;
	},
	
	showModal6(){
		Modal.confirm({
			title: '确定删除？',
			icon: Vue.createVNode(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
			content: 'When clicked the OK button, this dialog will be closed after 1 second',
			onOk() {
				return new Promise((resolve, reject) => {
					// resolve();		//正常
					// reject();		//抛异常
					setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);		//这里用随机数来确定是正常，还是抛异常
				}).catch(() => {
					console.log('Oops errors!')
				});
			},
			// eslint-disable-next-line @typescript-eslint/no-empty-function
			onCancel(){
				console.log('点了取消。');
			},
			maskClosable: true,
		});
	},
	
	showModal7(){
		this.open7 = true;
	},
	handleOk7(e){
		console.log(e);
		this.open7 = false;
	},
	
	showModal8(){
		this.open8 = true;
	},
	handleOk8(e){
		console.log(e);
		this.open8 = false;
	},
	
	showModal9(){
		this.open9 = true;
	},
	handleOk9(e){
		console.log(e);
		this.modalText = 'The modal will be closed after two seconds';
		this.confirmLoading9 = true;
		
		setTimeout(() => {
			this.open9 = false;
			this.confirmLoading9 = false;
		}, 2000);
	},
	
	showConfirm1(){
		Modal.confirm({
			title: 'Do you Want to delete these items?',
			icon: Vue.createVNode(ElementPlusIconsVue.Warning, {class: "aut-icon"}),
			content: Vue.createVNode('div', { style: 'color:red;' }, 'Some descriptions'),
			onOk() {
				console.log('OK1');
			},
			onCancel() {
				console.log('Cancel1');
			},
			class: 'test888',
			maskClosable: true,
		});
	},
	showConfirm2(){
		Modal.confirm({
			title: 'Do you want to delete these items?',
			icon: Vue.createVNode(ElementPlusIconsVue.Warning, {class: "aut-icon"}),
			content: 'When clicked the OK button, this dialog will be closed after 1 second',
			async onOk() {
				console.log('OK2');
				try {
					return await new Promise((resolve, reject) => {
						// resolve();		//正常
						// reject();		//抛异常
						setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);		//这里用随机数来确定是正常，还是抛异常
					});
				} catch {
					return console.log('Oops errors2!');
				}
			},
			onCancel(){
				console.log('Cancel2');
			},
		});
	},
	showConfirm3(){
		Modal.confirm({
			title: 'Are you sure delete this task?',
			icon: Vue.createVNode(ElementPlusIconsVue.Warning, {class: "aut-icon"}),
			content: 'Some descriptions',
			okText: 'Yes',
			okType: 'danger',
			cancelText: 'No',
			onOk() {
				console.log('OK3');
			},
			onCancel() {
				console.log('Cancel3');
			},
		});
	},
	showConfirm4(){
		Modal.confirm({
			title: 'Are you sure delete this task?',
			icon: Vue.createVNode(ElementPlusIconsVue.Warning, {class: "aut-icon"}),
			content: 'Some descriptions',
			okText: 'Yes',
			okType: 'danger',
			okButtonProps: {
				disabled: true,
			},
			cancelText: 'No',
			onOk() {
				console.log('OK4');
			},
			onCancel() {
				console.log('Cancel4');
			},
		});
	},
	
	showModal12(){
		let secondsToGo = 5;
		const modal = Modal.success({
			title: 'This is a notification message',
			content: `This modal will be destroyed after ${secondsToGo} second.`,
		});
		const interval = setInterval(() => {
			secondsToGo -= 1;
			modal.update({
				content: `This modal will be destroyed after ${secondsToGo} second.`,
			});
		}, 1000);
		setTimeout(() => {
			clearInterval(interval);
			modal.destroy();
		}, secondsToGo * 1000);
	},
	showModal13(){
		for(let i = 0; i < 3; i += 1){
			setTimeout(() => {
				Modal.confirm({
					content: 'destroy all',
					icon: Vue.createVNode(ElementPlusIconsVue.Warning, {class: "aut-icon"}),
					onOk() {
						return new Promise((resolve, reject) => {
							setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
						}).catch(() => console.log('Oops errors!'));
					},
					cancelText: 'Click to destroy all',
					onCancel() {
						Modal.destroyAll();
					},
				});
			}, i * 500);
		}
	},
	
	showModal14(){
		this.open14 = true;
	},
	handleOk14(e){
		console.log(e);
		this.open14 = false;
	},
	
	showModal15(){
		this.open15 = true;
	},
	handleOk15(e){
		console.log(e);
		this.open15 = false;
	},
	
},
}

const app = Vue.createApp(Main);
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
